<template>
  <div class="page-fav page-frame">
    <div class="page-frame-body">
    <div class="fav-list">
      <item-line v-for="(item,index) in favList" v-bind:item="item" v-bind:key="index"></item-line>
    </div>
    </div>
    <nav-toolbars data="3"></nav-toolbars>
  </div>
</template>

<script>
import ItemLine from "@/components/site.vue";
import NavToolbars from "@/components/navigation.vue";
export default {
  name: "HelloWorld",
  data() {
    return {
      favList: []
    };
  },
  components: {
    NavToolbars,
    ItemLine
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      var self = this;
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuery()
      });
      // 请求数据
      req.then(res => {
        var data = res.data.data.me;
        if (data != null) {
          var fav = [];
          this.id = data.id;
          data.favorite.forEach(item => {
            var obj = {};
            var d = item.site;
            obj.id = d.id;
            obj.name = d.name;
            obj.lat = d.lat;
            obj.lon = d.long;
            obj.free = d.free;
            obj.address = d.address;
            obj.area = d.area;

            fav.push(obj);
          });

          this.favList = fav;
        }
      });
      // 请求接口失败
      req.catch(res => {
        this.Toast("服务器开小差了~");
      });
    },
    GetQuery() {
      return {
        query: `{
              me {
                id
                favorite{
                  site{
                      id
                      name
                      area
                      address
                      collected
                      unitPrice
                  }
                }
              }
            }`
      };
    },
    GoDeviceInfo(id) {
      this.$router.push({
        path: "deviceInfo",
        query: { id: id }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.page-fav {
  .fav-list {
    box-sizing: border-box;

    .f-item {
      min-height: 120px;
      display: -webkit-box;
      -webkit-box-align: start;
      -webkit-box-pack: center;
      border: 1px solid #ececec;
      overflow: hidden;
      padding-right: 30px;
      .f-inner {
        -webkit-box-flex: 1;
        padding: 20px 40px 20px 30px;
        box-sizing: border-box;
        background: url("../public/imgs/icon-arrow-right.png") right center
          no-repeat;
        background-size: 40px 40px;
        h4 {
          font-weight: normal;
          font-size: 30px;
          color: #333;
          display: block;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          font-size: 26px;
          color: #999;
          line-height: 30px;
        }
      }
    }
  }
}
</style>



